export function clickNode(model) {
  console.info('clickNode', model)
}

export function clickToolbar(status) {
  console.info('clickToolbar', status)
}

export const htmlCode = `<graph-relation2
  style="width: 100%; height: 500px"
  showToolbar
  backgroundColor="#fbfbfb"
  :mouseZoomable="false"
  :data="data"
  :waterMarker="waterMarker"
  @clickNode="clickNode"
  @clickToolbar="clickToolbar"
></graph-relation2>`

export const scriptCode = `const waterMarker = {
  url: '/健身房.png',
  width: 187,
  height: 137,
}

function clickNode(model) {
  console.info('clickNode', model)
}

function clickToolbar(status) {
  console.info('clickToolbar', status)
}

const data = {
  text: '杭州仟金顶信息技术有限公司',
  type: 'root-node',
  children: [
    {
      text: '股东1',
      type: 'relation-node',
      mainColor: 'green',
      arrow: 'in',
      children: [
        {
          text: '王某1',
          type: 'entity-node',
          mainColor: 'green',
          hasPoint: true,
          subText: '[40%]',
          logoType: 'person',
          tags: [
            {
              text: '失信被执行人',
              riskType: 'bad',
            },
            {
              text: '法律诉讼',
              riskType: 'bad',
            },
            {
              text: '股东',
              riskType: 'good',
            },
            {
              text: '对外投资',
              riskType: 'good',
            },
          ],
          descriptions: [{ label: '股权占比', value: '40%' }],
          children: [
            {
              text: '对外投资1',
              type: 'relation-node',
              mainColor: 'orange',
              arrow: 'in',
            },
          ],
        },
        {
          text: '黄某',
          type: 'entity-node',
          mainColor: 'green',
          hasPoint: true,
          subText: '[40%]',
          children: [
            {
              text: '对外投资2',
              type: 'relation-node',
              mainColor: 'orange',
              arrow: 'out',
            },
          ],
        },
        {
          text: '展开',
          type: 'more-node',
          subText: '[1]',
          hiddenChildren: [
            {
              text: '李某',
              type: 'entity-node',
              mainColor: 'green',
              hasPoint: true,
              subText: '[40%]',
            },
          ],
        },
      ],
    },
    {
      text: '股东2',
      type: 'relation-node',
      mainColor: 'blue',
      arrow: 'out',
      children: [
        {
          text: 'A公司',
          type: 'entity-node',
          mainColor: 'blue',
          hasPoint: true,
          subText: '[40%]',
          children: [
            {
              text: '对外投资3',
              type: 'relation-node',
              mainColor: 'red',
              arrow: 'in',
            },
            {
              text: '对外投资4',
              type: 'relation-node',
              mainColor: 'red',
              arrow: 'out',
            },
          ],
        },
        {
          text: 'B公司',
          type: 'entity-node',
          mainColor: 'blue',
          hasPoint: true,
          subText: '[40%]',
        },
        {
          text: '展开',
          type: 'more-node',
          subText: '[1]',
          hiddenChildren: [
            {
              text: 'C公司',
              type: 'entity-node',
              mainColor: 'blue',
              hasPoint: true,
              subText: '[40%]',
            },
          ],
        },
      ],
    },
  ],
}`

export const propsTable = [
  {
    name: 'data',
    desc: '树形数据，children、text、type字段是必须的',
    type: 'Object',
    default: '',
  },
  {
    name: 'nodeVGap',
    desc: '节点原点间垂直距离',
    type: 'number',
    default: '30',
  },
  {
    name: 'nodeHGap',
    desc: '节点原点间水平距离',
    type: 'number',
    default: '30',
  },
  { name: 'nodeWidth', desc: '节点宽度', type: 'number', default: '200' },
  { name: 'defaultZoom', desc: '默认缩放比例', type: 'number', default: '0.7' },
  { name: 'minZoom', desc: '最小缩放比例', type: 'number', default: '0.3' },
  { name: 'maxZoom', desc: '最大缩放比例', type: 'number', default: '2' },
  {
    name: 'mouseZoomable',
    desc: '是否可通过鼠标滚轮缩放',
    type: 'boolean',
    default: 'true',
  },
  {
    name: 'showToolbar',
    desc: '是否显示工具条',
    type: 'boolean',
    default: 'false',
  },
  {
    name: 'waterMarker',
    desc: '水印的配置，非必须',
    type: '{ url: string, width: number, height: number }',
    default: '',
  },
  {
    name: 'backgroundColor',
    desc: '背景色',
    type: 'string',
    default: '',
  },
]

export const paramTable = [
  { name: 'text', desc: '主文案，必须', type: 'string', default: '' },
  { name: 'children', desc: '子节点数组', type: 'Array', default: '' },
  {
    name: 'type',
    desc: '节点类型，必须，不同的类型有不同的效果，可选值（根节点：root-node | 关系节点：relation-node | 实体节点：entity-node | 展开节点：more-node）',
    type: 'string',
    default: '',
  },
  {
    name: 'collapsed',
    desc: '节点默认的折叠状态',
    type: 'boolean',
    default: '',
  },
]

export const rootNodeParamTable = [
  {
    desc: '节点类型，必须',
    name: 'type',
    type: 'string',
    default: '此处为"root-node"',
  },
  { name: 'text', desc: '主文案，必须', type: 'string', default: '' },
  { name: 'children', desc: '子节点数组', type: 'Array', default: '' },
  {
    name: 'collapsed',
    desc: '节点默认的折叠状态',
    type: 'boolean',
    default: '',
  },
]

export const relationNodeParamTable = [
  {
    desc: '节点类型，必须',
    name: 'type',
    type: 'string',
    default: '此处为"relation-node"',
  },
  { name: 'text', desc: '主文案，必须', type: 'string', default: '' },
  { name: 'children', desc: '子节点数组', type: 'Array', default: '' },
  {
    name: 'collapsed',
    desc: '节点默认的折叠状态',
    type: 'boolean',
    default: '',
  },
  {
    name: 'direction',
    desc: '非必须，用于指定节点在左边还是右边，只有在根节点下的亲子节点设置才有效',
    type: '"left" || "right"',
    default: '',
  },
  {
    name: 'mainColor',
    desc: '节点主颜色，这里指圆点的颜色',
    type: 'string',
    default: '',
  },
  {
    name: 'arrow',
    desc: '投资或占股等的方向，可选值（"in"、"out"）',
    type: 'string',
    default: '',
  },
]

export const entityNodeParamTable = [
  {
    desc: '节点类型，必须',
    name: 'type',
    type: 'string',
    default: '此处为"entity-node"',
  },
  { name: 'text', desc: '主文案，必须', type: 'string', default: '' },
  { name: 'children', desc: '子节点数组', type: 'Array', default: '' },
  {
    name: 'collapsed',
    desc: '节点默认的折叠状态',
    type: 'boolean',
    default: '',
  },
  {
    name: 'direction',
    desc: '非必须，用于指定节点在左边还是右边，只有在根节点下的亲子节点设置才有效',
    type: '"left" || "right"',
    default: '',
  },
  {
    name: 'mainColor',
    desc: '节点主颜色，这里指边框的颜色',
    type: 'string',
    default: '',
  },
  {
    name: 'hasPoint',
    desc: '是否有风险点，表现为节点右上角是否有小红点',
    type: 'boolean',
    default: '',
  },
  {
    name: 'subText',
    desc: '子文案，可填入占股、职位等信息',
    type: 'string',
    default: '',
  },
  {
    name: 'logoType',
    desc: 'tooltip中的logo类型，可选值为"company"、"person"',
    type: 'string',
    default: '',
  },
  {
    name: 'tags',
    desc: 'tooltip中的标签，可以通过riskType调整样式。riskType可传入“good”或“bad”，默认为“good”的样式',
    type: '{ text: string, riskType: "good" || "bad" }',
    default: '',
  },
  {
    name: 'descriptions',
    desc: 'tooltip中的描述信息',
    type: '{ label: string, value: string }',
    default: '',
  },
]

export const moreNodeParamTable = [
  {
    desc: '节点类型，必须',
    name: 'type',
    type: 'string',
    default: '此处为"more-node"',
  },
  { name: 'text', desc: '主文案，必须', type: 'string', default: '' },
  {
    name: 'subText',
    desc: '子文案，可填入被隐藏的节点数',
    type: 'string',
    default: '',
  },
  {
    name: 'hiddenChildren',
    desc: '被隐藏的节点',
    type: 'Array',
    default: '',
  },
]

export const exposeTable = [
  {
    name: 'getGraphInstance',
    desc: '获取graph实例，可用于调用antv的实例方法。另可通过调用getGraphInstance().myInit()重置位移与缩放',
    type: '() => Graph',
  },
]

export const eventTable = [
  {
    name: 'clickNode',
    desc: '点击 node 时触发',
    type: '(model: Object) => void',
  },
  {
    name: 'clickToolbar',
    desc: '点击 toolbar 中的工具时触发',
    type: '(status: "fullScreen" || "normalScreen" || "zoomIn" || "zoomOut") => void',
  },
]
